<template>
  <div class="timely-rate">
    <div class="search-header">
      <el-date-picker
        v-model="queryParams.countYear"
        size="mini"
        type="year"
        style="width: 160px;margin-right: 10px;"
        placeholder="请选择年份"
      />
      <el-select v-model="queryParams.countMonth" size="mini" style="width: 160px;" clearable placeholder="请选择月份">
        <el-option
          v-for="item in monthList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="oprate-btn">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="dataChange">查询</el-button>
        <!--<el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>-->
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="table"
      row-key="uniqueId"
      default-expand-all
      size="mini"
      style="width: 100%;"
      height="calc(100vh - 200px)"
    >
      <el-table-column
        label="单位"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.twoLevelOrgName || scope.row.oneLevelOrgName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="集团检查项目数（年度覆盖）" align="center">
        <el-table-column label="设计" align="center">
          <el-table-column prop="tjbatch" label="当月检查数" align="center" min-width="60" />
          <el-table-column prop="tjfinished" label="年度累计完成率" align="center" min-width="82" />
        </el-table-column>
        <el-table-column label="工程" align="center">
          <el-table-column label="当月检查数" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 2, 1)">{{ scope.row.tjnotimely }}</div>
            </template>
          </el-table-column>
          <el-table-column label="年度累计完成率" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 3, 1)">{{ scope.row.tjnofinished }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="集群检查项目数（季度覆盖）" align="center">
        <el-table-column label="设计" align="center">
          <el-table-column prop="jzbatch" label="当月检查数" align="center" min-width="60" />
          <el-table-column prop="jzfinished" label="季度累计完成率" align="center" min-width="82" />
        </el-table-column>
        <el-table-column label="工程" align="center">
          <el-table-column label="当月检查数" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 2, 1)">{{ scope.row.jznotimely }}</div>
            </template>
          </el-table-column>
          <el-table-column label="季度累计完成率" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 3, 1)">{{ scope.row.jznofinished }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="事业部自查项目数（月度覆盖）" align="center">
        <el-table-column label="设计" align="center">
          <el-table-column prop="jzbatch" label="当月检查数" align="center" min-width="60" />
          <el-table-column prop="jzfinished" label="月度累计完成率" align="center" min-width="82" />
        </el-table-column>
        <el-table-column label="工程" align="center">
          <el-table-column label="当月检查数" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 2, 1)">{{ scope.row.sdnotimely }}</div>
            </template>
          </el-table-column>
          <el-table-column label="月度累计完成率" align="center" min-width="82">
            <template slot-scope="scope">
              <div class="no-check" @click="goNoCheck(scope.row, 3, 1)">{{ scope.row.sdnofinished }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { summaryChkprocessReport } from '@/api/cqPe/statement'
import { downloadKeyTimelyRate } from '@/api/statement/keyProcessCheck'
import { monthList} from '../../../utils/baseData'

export default {
  name: 'SummaryTable',
  data() {
    return {
      table: [],
      loading: false,
      fileLoading: false,
      yearMonth: '',
      queryParams: {
        countYear: '',
        countMonth: ''
      },
      dataSourceKey: '',
      monthList: monthList
    }
  },
  created() {
    const month = new Date()
    month.setMonth(month.getMonth() - 1)
    this.queryParams.countYear = month.getFullYear() + ''
    this.queryParams.countMonth = month.getMonth() + 1 + ''
    this.init()
  },
  methods: {
    yearMonthChange(value) {
      if (value) {
        const ymArr = value.split('-')
        this.queryParams.countYear = ymArr[0]
        this.queryParams.countMonth = ymArr[1]
        this.init()
      }
    },
    init() {
      this.loading = true
      summaryChkprocessReport(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            const list = response.data
            list.forEach(item => {
              item.uniqueId = item.oneLevelOrgId
              setRate(item)
              if (item.sybReportVOList && item.sybReportVOList.length > 0) {
                item.sybReportVOList.forEach(voItem => {
                  setRate(voItem)
                  voItem.uniqueId = voItem.twoLevelOrgId
                })
              }
              item.children = item.sybReportVOList
            })
            this.table = list
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
      function setRate(item) {
        // 集团 项目  年度累计完成率
        item.jtCheckProRate = '0%'
        if (item.jtNeedProNum) {
          item.jtCheckProRate = (item.jtCheckProNum / item.jtNeedProNum * 100).toFixed(2) + '%'
        }
        // 集团 检查项 年度累计完成率
        item.jtCheckItemRate = '0%'
        if (item.jtNeedItemNum) {
          item.jtCheckItemRate = (item.jtCheckItemNum / item.jtNeedItemNum * 100).toFixed(2) + '%'
        }
        // 集群 项目  季度累计完成率
        item.jqCheckProRate = '0%'
        if (item.jqNeedProNum) {
          item.jqCheckProRate = (item.jqCheckProNum / item.jqNeedProNum * 100).toFixed(2) + '%'
        }
        // 集群 检查项 季度累计完成率
        item.jqCheckItemRate = '0%'
        if (item.jqNeedItemNum) {
          item.jqCheckItemRate = (item.jqCheckItemNum / item.jqNeedItemNum).toFixed(2) * 100 + '%'
        }
        // 事业部 项目  月度累计完成率
        item.sybCheckProRate = '0%'
        if (item.sybNeedProNum) {
          item.sybCheckProRate = (item.sybCheckProNum / item.sybNeedProNum * 100).toFixed(2) + '%'
        }
      }
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      downloadKeyTimelyRate({ ...this.queryParams, dataSourceKey: this.dataSourceKey }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '项目抽球工程报表.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange() {
      this.init()
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    .search-header{
      margin: 10px 0;
      .oprate-btn {
        display: inline-block;
        margin-left: 50px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
